<template>
  <div>

    <transition name="el-zoom-in-center">
      <div v-show="show" class="head_box">
        <el-row :gutter="12">
          <el-col :span="8">
            <el-card class="box-card-total" shadow="hover">
              <div class="text1 item">
                <b>总订单</b>
              </div>
              <div class="text item">
                <b>{{allCount}}</b>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="box-card-new" shadow="hover">
              <div class="text1 item">
                <b>新订单</b>
              </div>
              <div class="text item">
                <b>{{newCount}}</b>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="box-card-ing" shadow="hover">
              <div class="text1 item">
                <b>进行中订单</b>
              </div>
              <div class="text item">
                <b>{{activeCount}}</b>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </transition>
    <el-collapse-transition>
      <el-card v-show="show" shadow="always" class="orderTable">
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="日期"
          width="180">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="姓名"
          width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>姓名: {{ scope.row.name }}</p>
              <p>住址: {{ scope.row.address }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.name}}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          label="电话"
          width="180">
          <template slot-scope="scope">
            <i class="el-icon-mobile-phone"></i>
            <span style="margin-left: 10px">{{ scope.row.phone }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="地址"
          width="180">
          <template slot-scope="scope">
            <i class="el-icon-location-outline"></i>
            <span style="margin-left: 10px">{{ scope.row.address }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="配送费"
          width="180">
          <template slot-scope="scope">
            <i class="el-icon-goods"></i>
            <span style="margin-left: 10px">{{ scope.row.deliveryCost }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="备注"
          width="180">
          <template slot-scope="scope">
            <i class="el-icon-edit"></i>
            <span style="margin-left: 10px">{{ scope.row.remarks }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="订单状态"
          width="180">
          <template slot-scope="scope">
            <i class="el-icon-view"></i>
            <span style="margin-left: 10px" v-if="scope.row.status == 0"><el-tag type="danger">未接单</el-tag></span>
            <span style="margin-left: 10px" v-if="scope.row.status == 1"><el-tag type="success">已接单</el-tag></span>
            <span style="margin-left: 10px" v-if="scope.row.status == 2"><el-tag >配送中</el-tag></span>
            <span style="margin-left: 10px" v-if="scope.row.status == 3"><el-tag type="success">已完成</el-tag></span>
            <span style="margin-left: 10px" v-if="scope.row.status == 4"><el-tag type="info">拒绝</el-tag></span>
            <span style="margin-left: 10px" v-if="scope.row.status == 5"><el-tag type="info">已取消</el-tag></span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10,20,30]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="40">-->
      <!--</el-pagination>-->
    </el-card>
    </el-collapse-transition>
    <!--弹出框-->

    <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column property="date" label="日期" width="150" sortable></el-table-column>
        <el-table-column property="name" label="姓名" width="200"></el-table-column>
        <el-table-column property="address" label="地址"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'MerchantContainer',
  data () {
    return {
      tableData: [],
      dialogTableVisible: false,
      newCount: '',
      activeCount: '',
      allCount: '',
      currentPage: 2,
      gridData: '',
      show: false
    }
  },
  created () {
    this.initOrderCount('2')
    this.getOrders('2')
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    handleEdit (index, row) {
      console.log(index, row)
    },
    handleDelete (index, row) {
      console.log(index, row)
    },
    getOrders (storeId) {
      this.$merchantAPI.order_all(storeId).then((params) => {
        this.tableData = params.data
        this.show = true
      }).catch((params) => {
      })
    },
    initOrderCount (storeId) {
      this.$merchantAPI.order_allCount(storeId).then((params) => {
        this.allCount = params.data
      }).catch((params) => {
      })
      this.$merchantAPI.order_activeCount(storeId).then((params) => {
        this.activeCount = params.data
      }).catch((params) => {
      })
      this.$merchantAPI.order_newCount(storeId).then((params) => {
        this.newCount = params.data
      }).catch((params) => {
      })
    }
  }
}
</script>

<style scoped>
  .head_box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .text {
    font-size: 2.5em;
    color: aliceblue;
  }

  .text1 {
    font-size: 1.5em;
    color: aliceblue;
  }

  .item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
  }

  .box-card-total {
    width: 300px;
    height: 200px;
    border-radius: 20px;
    position: relative;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    margin-top: 40px;
    margin-left: 80px;
    margin-right: 80px;
    margin-bottom: 40px;
    background: -webkit-gradient(linear, left top, left bottom, from(#eea2a2), to(#7ac5d8));
  }

  .box-card-new {
    width: 300px;
    height: 200px;
    border-radius: 20px;
    position: relative;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    margin-top: 40px;
    margin-left: 80px;
    margin-right: 80px;
    margin-bottom: 40px;
    background: -webkit-gradient(linear, left top, left bottom, from(#9be15d), to(#00e3ae));
  }

  .box-card-ing {
    width: 300px;
    border: 2px solid white;
    height: 200px;
    border-radius: 20px;
    position: relative;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
    margin-left: 80px;
    margin-right: 80px;
    margin-bottom: 40px;
    background: -webkit-gradient(linear, left top, left bottom, from(#ff0844), to(#ffb199));
  }

  .box-card-total:hover {
    top: -25px;
    background: -webkit-gradient(linear, left top, left bottom, from(#df89b5), to(#c2e9fb));
  }

  .box-card-new:hover {
    top: -25px;
    background: -webkit-gradient(linear, left top, left bottom, from(#2af598), to(#009efd));
  }

  .box-card-ing:hover {
    top: -25px;
    background: -webkit-gradient(linear, left top, left bottom, from(#f77062), to(#fe5196));
  }

  .orderTable {
  }
</style>
